<template>
	<view class="OutpatientTopUp">
		<SwitchPatient :fun="swit" :id="Data.optionId || 0" balance></SwitchPatient>
		<view class="onlineTop">
			<text>在线充值</text>
			<view class="top">
				<view v-for="v in moneyData" :key="v" @click="topActiveFu(v)"
					:class="Data.topActive == v ? 'active' : ''">
					<text>{{ v }}</text>
				</view>
				<view @click="topActiveFu('自定义')" :class="Data.topActive == '自定义' ? 'active' : ''">
					<text v-show="Data.topActive != '自定义'">
						{{ Data.DepositAmount in moneyData || '自定义' }}
					</text>
					<input ref="inp" v-show="Data.topActive == '自定义'" maxlength="7" type="number"
						v-model="Data.DepositAmount" />
				</view>
			</view>
			<view class="readingAmount">
				<text @click="toRecharge">充值记录</text>
			</view>
			<button class="sure" @click="add">确认充值</button>
		</view>
	</view>
</template>

<script setup>
	import SwitchPatient from '@/components/SwitchPatient.vue'
	import {
		reactive,
		onMounted
	} from 'vue'
	import {
		useTopStore
	} from '@/store/TopUpService.js';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const topStore = useTopStore();
	const Data = reactive({
		topActive: '50',
		DepositAmount: 50,
		id: 0,
		optionId: 0
	})
	const moneyData = ['50', '100', '200', '500', '1000']
	const topActiveFu = v => {
		Data.topActive = v
		if (v == '自定义') {
			Data.DepositAmount = NaN
		}
	}
	const swit = (v) => {
		Data.id = v.id
	}
	const add = () => {
		if (Data.topActive != '自定义') {
			Data.DepositAmount = parseInt(Data.topActive)
		}
		uni.showLoading({
			title: '微信支付',
			mask: true,
		});
		setTimeout(() => {
			uni.hideLoading();
			topStore.set((v) => {
				v.topType = 'online';
			})
			uni.navigateTo({
				url: `/pages/selfPayment/rechargePage/rechargePage?money=${Data.DepositAmount}&id=${Data.id}`
			})
		}, 2000)
	}
	const toRecharge = () => {
		uni.navigateTo({
			url: `/pages/selfPayment/rechargeRecord/rechargeRecord?id=${Data.id}`
		})
	}
	onMounted(() => {})
	onLoad((options) => {
		options.id && (Data.optionId = options.id)
	})
</script>

<style lang="less" scoped>
	.OutpatientTopUp {
		.onlineTop {
			width: 680rpx;
			margin: 0 auto;

			&>text {
				font-size: 36rpx;
				font-weight: 600;
			}

			&>.top {
				display: flex;
				flex-wrap: wrap;
				margin: 40rpx 0;

				.active {
					background-color: #e3efff;
					border: 1px solid #196dff;
					color: #196dff;
				}

				view {
					width: 210rpx;
					height: 100rpx;
					border-radius: 20rpx;
					background-color: #f2f2f2;
					margin: 10rpx 8rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border: 1px solid transparent;
					box-sizing: border-box;

					input {
						text-align: center;
					}
				}
			}

			.readingAmount {
				width: 100%;
				display: flex;
				justify-content: flex-end;
				color: #026aff;
				font-weight: 600;
				font-size: 32rpx;
				margin: 0 0 50rpx 0;
			}

			.sure {
				width: 100%;
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #006eff;
				color: #fff;
				font-size: 40rpx;
				font-weight: 600;
			}
		}
	}
</style>
